<template>
  <el-descriptions direction="vertical" :border="true">
    <!-- 地理位置 -->
    <el-descriptions-item :rowspan="1" label="地理位置" align="center">
      <Map style="margin: 0 auto"></Map>
    </el-descriptions-item>
    <!-- 简照轮播 -->
    <el-descriptions-item label="小区简照" :span="3" align="center">
      <div class="block text-center">
        <el-carousel motion-blur>
          <el-carousel-item v-for="(ImgUrl,index) in Imgurls" :key="index">
            <img :src="ImgUrl" alt="示例图片" style="width: 100%;">
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-descriptions-item>
    <!-- 小区入口照片 -->
    <el-descriptions-item
      :rowspan="3"
      :width="140"
      label="小区入口照"
      align="center"
    >
      <el-image :src="currentImageSrc">
        <template #error>
          <div class="flex-center">
            <img :src="FailImage" alt="图片加载失败" class="errimg" />
          </div>
        </template>
      </el-image>
    </el-descriptions-item>
    <!-- 基础信息 -->
    <el-descriptions-item label="社区名称">{{
      useStore.communityBase.社区名称
    }}</el-descriptions-item>
    <el-descriptions-item label="社区地址">{{
      useStore.communityBase.社区地址
    }}</el-descriptions-item>
    <el-descriptions-item label="物业">{{
      useStore.communityBase?.物业信息?.物业公司名称
    }}</el-descriptions-item>
    <el-descriptions-item label="物业电话">{{
      useStore.communityBase?.物业信息?.物业联系电话
    }}</el-descriptions-item>
        <el-descriptions-item label="居委会地址">{{
      useStore.communityBase?.居民委员会?.办公地址
    }}</el-descriptions-item>
    <el-descriptions-item label="居委会联系电话">{{
      useStore.communityBase?.居民委员会?.联系电话
    }}</el-descriptions-item>
    <!-- 独占行 -->
    <el-descriptions-item label="社区简介" :span="3">{{
      useStore.communityBase.社区简介
    }}</el-descriptions-item>
    <el-descriptions-item label="社区规则" >
        <span v-for="(item,index) in useStore.communityBase.社区规则" :key="index">{{ `${index+1}. ${item}` }}<br/></span>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import Map from "../baseinfo/Map.vue";
import FailImage from "@/assets/img/imgFail.png";

import img1 from "@/assets/img/01.jpg";
import img2 from "@/assets/img/02.jpg";
import img3 from "@/assets/img/03.jpg";
import img4 from "@/assets/img/04.jpg";

import useCommunityStore from "@/store/modules/community";
const useStore = useCommunityStore();

const currentImageSrc = ref("/cy/imgDoc/C-Name.jpg");
const Imgurls=[img1,img2,img3,img4]
// const currentImageSrc = ref();
const getBase = async () => {
  // 判断pinia库是否存储
  if (
    !useStore.communityBase ||
    Object.keys(useStore.communityBase).length === 0
  ) {
    await useStore.getcommunityBase("community_info");
  }
  console.log(useStore.communityBase);
};
onMounted(() => {
  getBase();
});
</script>

<style scoped lang="scss">
.el-image {
  padding: 0 0.3125rem;
  width: 25rem;
  .errimg {
    padding: 0 0.3125rem;
    width: 25rem;
  }
}
.dot {
  animation: dot 2s infinite steps(3, start);
  overflow: hidden;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
